<!DOCTYPE html>
<html>
<head>
	<title>SoundJS: Preload & Sound APIs</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
	<style>
		.plugin {
			font-size: 16px;
			font-weight: bold;
		}
	</style>
</head>

<body onload="init()">

<header class="SoundJS">
	<h1>Load with PreloadJS</h1>

	<p>This example preloads an audio instance, and immediately plays it using
		SoundJS. A different audio source will be chosen by SoundJS depending on
		the browser capabilities. Note that this will not work without a web
		server in some browsers.</p>
</header>

<div class="content" id="content" style="height: auto">
	<div>
		<a href="?type=normal">Web Audio with HTML Audio then Flash
			Fallbacks</a> | <a href="?type=html5">HTML Audio Only</a> | <a
			href="?type=flash">Flash Only</a>
	</div>

	<div class="plugin">
		<p id="activePlugin">Active Plugin is</p>
	</div>

	<p id="status">Loading...</p>
</div>

<div id="error">
	<h2>Sorry!</h2>

	<p>SoundJS is not currently supported in your browser.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the device and browser you are using. Thank you.</p>
</div>

<div id="mobile">
	<h2>Sorry!</h2>

	<p>Mobile devices require sound to be played inside of user events, which
		this demo does not do.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the OS and browser if you see this on a device that is not mobile.
		Thank you.</p>
</div>

<script type="text/javascript" src="../_assets/libs/preloadjs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/soundjs-NEXT.js"></script>
<!-- Note: FlashAudioPlugin is only needed to support older browsers -->
<script type="text/javascript" src="../lib/flashaudioplugin-NEXT.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.
	http://code.createjs.com -->

<script id="editable">
	// Read the URL Params. We need to do this to determine the plugin mode.
	var params = {};
	var pieces = window.location.search.slice(1).split("&");
	for (var i = 0, l = pieces.length; i < l; i++) {
		var parts = pieces[i].split("=");
		params[parts[0]] = parts[1];
	}

	var queue;
	var displayStatus;

	function init() {
		createjs.FlashAudioPlugin.swfPath = "../src/soundjs/flashaudio/"; // Initialize the base path from this document to the Flash Plugin
		if (params.type == "flash") {
			createjs.Sound.registerPlugins([createjs.FlashAudioPlugin]);
		} else if (params.type == "html5") {
			createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
		} else {
			createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.HTMLAudioPlugin, createjs.FlashAudioPlugin]);
		}

		if (!createjs.Sound.isReady()) {
			document.getElementById("error").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry) {
			document.getElementById("mobile").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		var pluginStatus = document.getElementById("activePlugin");
		pluginStatus.innerHTML = "Active Plugin is " + createjs.Sound.activePlugin.toString();  // innerText does not work in FF

		displayStatus = document.getElementById("status");

		// Create a single item to load.
		var assetsPath = "../_assets/audio/";
		//var item = {src:assetsPath+"M-GameBG.ogg", id:"music"};
		var manifest = [
			{id: "music", src: assetsPath + "M-GameBG.ogg"}
		]

		// Instantiate a queue.
		queue = new createjs.LoadQueue();
		createjs.Sound.alternateExtensions = ["mp3"];	// add other extensions to try loading if the src file extension is not supported
		queue.installPlugin(createjs.Sound);
		queue.addEventListener("complete", loadComplete);
		queue.addEventListener("fileload", fileComplete);
		queue.addEventListener("error", handleFileError);
		queue.addEventListener("fileprogress", handleFileProgress);
		queue.addEventListener("progress", handleProgress);
		queue.loadManifest(manifest);
		//queue.loadFile(item, true);  // to load a single item
	}

	function handleFileError(evt) {
		console.log("error ", evt);
		// An error occurred.
		displayStatus.innerText = "Error :("
	}

	function handleFileProgress(evt) {
		// Progress happened.
		displayStatus.innerText = "Event File Loading: " + (queue.progress.toFixed(2) * 100) + "%";
	}

	function handleProgress(evt) {
		// Progress happened.
		displayStatus.innerText = "Event Loading: " + (queue.progress.toFixed(2) * 100) + "%";
	}

	function loadComplete(evt) {
		// Load completed.
		displayStatus.innerText = "Complete :)";
		playSound("music");
	}

	function fileComplete(evt) {
		console.log("Event Callback file loaded ", evt);
	}

	function playSound(name) {
		// Play the sound using the ID created above.
		return createjs.Sound.play(name);
	}

</script>

</body>
</html>
